<template>
  <div class="app-container">
    <el-steps :active="active" finish-status="success">
      <el-step title="基本信息"></el-step>
      <el-step title="规格参数"></el-step>
      <el-step title="销售属性"></el-step>
      <el-step title="SKU信息"></el-step>
      <el-step title="发布结果"></el-step>
    </el-steps>

    <pub-base ref="pubBase" v-show="active === 0"/>
    <pub-spec ref="pubSpec" v-show="active === 1"/>
    <pub-sale ref="pubSale" v-show="active === 2"/>
    <pub-sku ref="pubSku" v-show="active === 3"/>
    <pub-detail ref="pubDetail" v-show="active === 4"/>
    <pub-result ref="pubResult" @back="active--" v-show="active === 5"/>

    <div class="btns" v-show="active !== 5">
      <el-button style="margin-top: 12px;" @click="prev" :disabled="active === 0">上一步</el-button>
      <el-button style="margin-top: 12px;" @click="next" :disabled="active === 4">下一步</el-button>
      <el-button style="margin-top: 12px;" type="primary" @click="submit" :disabled="active !== 4">提 交</el-button>
    </div>
  </div>
</template>

<script>

import pubBase from '@/views/product/mainte/publish/components/pubBase'
import pubSale from '@/views/product/mainte/publish/components/pubSale'
import pubSpec from '@/views/product/mainte/publish/components/pubSpec'
import pubSku from '@/views/product/mainte/publish/components/pubSku'
import PubDetail from '@/views/product/mainte/publish/components/pubDetail'
import PubResult from '@/views/product/mainte/publish/components/pubResult'

export default {
  name: 'Publish',
  components: {
    pubBase,
    pubSale,
    pubSpec,
    pubSku,
    PubDetail,
    PubResult
  },
  data() {
    return {
      active: 0
    }
  },
  methods: {
    prev() {
      this.active--
    },
    async next() {
      if (this.active === 0) {
        // to 规格参数
        const isValid = await this.$refs.pubBase.validate()
        if (!isValid) {
          this.$modal.msgError('表单校验未通过')
          return
        }
        this.$refs.pubSpec.init(this.$refs.pubBase.getForm().catalogId)
      } else if (this.active === 1) {
        // to 销售属性
        const isValid = this.$refs.pubSpec.validate()
        if (!isValid) {
          this.$modal.msgError('请选择规格参数')
          return
        }
        this.$refs.pubSale.init(this.$refs.pubBase.getForm().catalogId)
      } else if (this.active === 2) {
        // to sku信息
        const isValid = this.$refs.pubSale.validate()
        if (!isValid) {
          this.$modal.msgError('请选择销售属性')
          return
        }
        this.$refs.pubSku.init(this.$refs.pubSale.getForm(), this.$refs.pubBase.getForm())
      } else if (this.active === 3) {
        // to detail
        const isValid = this.$refs.pubSku.validate()
        if (isValid) {
          this.$modal.msgError(isValid)
          return
        }

        this.$refs.pubDetail.init(this.$refs.pubBase.getForm(),
          this.$refs.pubSpec.getForm(), this.$refs.pubSku.getForm())
      }
      this.active++
    },
    // 提交数据
    submit() {
      this.$modal.confirm('将要提交数据，需要一小段时间，是否继续？').then(() => {
        this.$modal.loading('正在提交中，请稍候...')
        return this.$api.put('/product/spuInfo', this.$refs.pubDetail.submitForm())
      }).then(resp => {
        this.$refs.pubResult.init(true, resp.data)
      }).catch(err => {
        this.$refs.pubResult.init(false, undefined, err.message)
      }).finally(() => {
        this.active++
        this.$modal.closeLoading()
      })
    }
  }
}
</script>

<style scoped>
.btns {
  display: flex;
  justify-content: center;

  margin-top: 30px;
  margin-bottom: 80px;
}
</style>
